<div id="porlet_1"></div>
<div id="porlet_2">
  <div class="porlet_2"><b><a href="#">
    <!-- NAME -->
    THỜI KHÓA BIỂU
    <!-- END - NAME-->
  </a></b>
  </div>
</div>
<div id="porlet_3"></div>
<div id="porlet_4">
  <div class="porlet_4">&nbsp;</div>
</div>
<div id="porlet_5"></div>
<div style="clear:left"></div>
<div class="main_porlet">
  <!-- CONTENT -->
  <!-- SEARCH -->
  <!-- END - SEARCH -->

  <% if params[:day_month_year] %>
      <% @day_month_year = Date.strptime(params[:day_month_year], "%d/%m/%Y") %>
      <% @day_of_week = localize(@day_month_year, :format => '%A').to_i %>
      <% @week_of_day = (@day_month_year - Date.new(2013, 1, 14)).to_i/7+1 %>
  <% else %>
      <% @day_month_year = nil %>
      <% @day_of_week = nil %>
      <% @week_of_day = nil %>
  <% end %>

  <% if params[:week] %>
      <% @week = params[:week] %>
  <% else %>
      <% @week = nil %>
  <% end %>

  <!-- Tùy chọn xem TKB -->
  <div class="form_item" style="margin-bottom: 20px;">
    <div style="position: absolute;">
      <input type="radio" name="xem_theo" style="margin-top: -3px;" value="ngay"
             <% if params[:day_month_year] then %>checked="checked"
             <% end %>><br>
      <input type="radio" name="xem_theo" style="margin-top: 10px;" value="tuan"
             <% if params[:week] then %>checked="checked"
             <% end %>>
    </div>
    <div style="margin-left: 20px;">
      <!-- Xem TKB theo ngày -->
      <div>
        <form name="xem_theo_ngay" method='get' action='/thoi_khoa_bieus'>
          <div style="float:left; padding-right: 5px; font-weight: bold;">Xem theo ngày:</div>

          <input type="text" name="day_month_year" value="" id="date" style="background-color: #ffffff; border:1px inset; width: 240px; text-align: center;"/>

          <%= javascript_include_tag("jquery.ui.datepicker") %>
          <%= javascript_include_tag("jquery.ui.datepicker-vi") %>
          <script>
              $("#date").datepicker({
                  changeYear:true,
                  changeMonth:true,
                  showOn:'button',
                  buttonImage:'assets/calendar_icon.gif',
                  buttonImageOnly:true,
                  buttonText:"Vui lòng chọn ngày..."
              });
          </script>

          <input class="g-button g-button-submit " style="margin-top: 12px; margin-left: 50px; float:left; position:absolute;" type="submit" value="Xem"
                 onclick="if($('input[name=xem_theo]:checked').val() == 'ngay') { document.xem_theo_ngay.submit(); } else { document.xem_theo_tuan.submit(); } return false;">
        </form>
      </div>
      <!-- END - Xem TKB theo ngày -->

      <!-- Xem TKB theo tuần -->
      <div style="padding-top:10px; clear:left">
        <form name="xem_theo_tuan" method='get' action='/thoi_khoa_bieus'>
          <div style="float:left; padding-right: 5px; font-weight: bold;">Xem theo tuần:</div>
          <%= ThoiKhoaBieu.select_week_tag("week", Date.new(2013, 1, 14), 18, params[:week]) %>
        </form>
      </div>
      <!-- END - Xem TKB theo tuần -->

    </div>
  </div>
  <!-- End - Tùy chọn xem TKB -->
  <div style="clear:both;"></div>
  <!-- Tạo mảng phòng để lặp các phòng -->
  <% @phongs = [101, 102, 105, 106, 109, 110, 111, 17, 18, 19, 20] %>
  <!-- END - Tạo mảng phòng để lặp các phòng -->

  <div class="datagrid">
    <%= ThoiKhoaBieu.create_table(@phongs, @week, @day_month_year, @day_of_week, @week_of_day) %>
    <% if params[:week] %>
        <%= ThoiKhoaBieu.create_table(@phongs, @week, @day_month_year, @day_of_week, @week_of_day) %>
    <% end %>
  </div>
  <!-- End - Table -->
  <!-- END - CONTENT -->
</div>
<% if params[:week] %>
    <script>
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[0].getElementsByTagName("th")[13].style.paddingRight = 39;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[0].getElementsByTagName("th")[13].style.paddingLeft = 38;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].style.visibility = "hidden";

        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].style.marginTop = -3276;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("thead")[0].style.visibility = "hidden";
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("thead")[0].style.display = "block";
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].style.overflow = "auto";
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].style.width = "100%";
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].style.height = 467;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].style.display = "block";
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("tbody")[0].style.marginTop = -37;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("td")[0].style.width = 30;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("td")[1].style.width = 19;
        document.getElementsByClassName("datagrid")[0].getElementsByTagName("table")[1].getElementsByTagName("td")[2].style.width = 28;
    </script>
<% end %>
<style>


    #portal-column-one, #portal-column-two {
        display: none;
    }

    #center {
        width: 980px;
    }

    #porlet_4 {
        width: 760px;
    }

    .main_porlet {
        width: 977px;
    }
</style>
<script>
    document.getElementsByName("day_month_year")[0].value = "<%= @day_month_year.strftime('%d/%m/%Y') if @day_month_year%>";
</script>